import { Alert, Link } from '@aws-amplify/ui-react';

<Alert variation="info" role="none">
The live examples use Material 3 styling which is currently behind a feature flag. See <Link isExternal href="https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html">useMaterial3</Link> for more info. The next stable release of Flutter is expected to make Material 3 the default.
</Alert>

Widgets from Amplify UI are built using <Link isExternal href="https://docs.flutter.dev/ui/widgets/material">Material widgets</Link>. This means that all Amplify UI widgets will inherit the MaterialApp's <Link isExternal href="https://api.flutter.dev/flutter/material/ThemeData-class.html">ThemeData</Link>. Any customizations you make to the app's ThemeData will be reflected in the Amplify UI widgets.

## Getting started

Step 1: Wrap your app's `MaterialApp` widget with the Authenticator widget, and set MaterialApp's builder to `Authenticator.builder()`:

```dart
@override
Widget build(BuildContext context) {
  // Wrap your MaterialApp app in the Authenticator widget
  return Authenticator(
    child: MaterialApp(
      // Set builder to Authenticator.builder() to protect all routes
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}
```

Step 2: Use the theme to style widgets

```dart
@override
Widget build(BuildContext context) {
  return Authenticator(
    child: MaterialApp(
      // set the default theme
      theme: ThemeData.from(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.red,
          backgroundColor: Colors.white,
        ),
      ).copyWith(
        indicatorColor: Colors.red,
      ),
      // set the dark theme (optional)
      darkTheme: ThemeData.from(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.red,
          backgroundColor: Colors.black,
          brightness: Brightness.dark,
        ),
      ),
      // set the theme mode to respond to the user's system preferences (optional)
      themeMode: ThemeMode.system,
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}
```

## Material widgets

Below is a list of the Material widgets used within Amplify UI.

### Form Fields & Buttons

- <Link isExternal href="https://api.flutter.dev/flutter/material/TextFormField-class.html">TextFormField</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/TextField-class.html">TextField</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/Radio-class.html">Radio</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/CheckboxListTile-class.html">CheckboxListTile</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/ToggleButtons-class.html">ToggleButtons</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/TextButton-class.html">TextButton</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/ElevatedButton-class.html">ElevatedButton</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/OutlinedButton-class.html">OutlinedButton</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/FilledButton-class.html">FilledButton</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/IconButton-class.html">IconButton</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/InkWell-class.html">InkWell</Link>

### Dialogs & Banners

- <Link isExternal href="https://api.flutter.dev/flutter/material/Dialog-class.html">Dialog</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/DatePickerDialog-class.html">DatePickerDialog</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/SimpleDialogOption-class.html">SimpleDialogOption</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/MaterialBanner-class.html">MaterialBanner</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/SnackBar-class.html">SnackBar</Link>

### Other Widgets

- <Link isExternal href="https://api.flutter.dev/flutter/material/Icons-class.html">Icon</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/ListTile-class.html">ListTile</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/TabBar-class.html">TabBar</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html">CircularProgressIndicator</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/MaterialPage-class.html">MaterialPage</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/ScaffoldMessenger-class.html">ScaffoldMessenger</Link>
- <Link isExternal href="https://api.flutter.dev/flutter/material/Scaffold-class.html">Scaffold</Link>
